<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input v-model="search.keyword" placeholder="优惠劵名称" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
                <el-table-column label="#ID" prop="id" width="50"></el-table-column>
                <el-table-column label="优惠劵名称" prop="title" width="150"></el-table-column>
                <el-table-column label="活动" prop="activity.name" width="300"></el-table-column>
                <el-table-column label="金额" prop="amount" width="100"></el-table-column>
                <el-table-column label="有效天数" prop="valid_days" width="100"></el-table-column>
                <el-table-column label="已领取数量" prop="take_count" width="100"></el-table-column>
                <el-table-column label="已使数量" prop="used_count" width="100"></el-table-column>
                <el-table-column label="添加时间" prop="create_time" width="150"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="170">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="send(scope.row)">发放</el-button>
                            <el-button text type="primary" size="small" @click="sendLog(scope.row)">发放记录</el-button>
                            <!-- <el-popconfirm title="确定删除吗？" @confirm="del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="primary" size="small">删除</el-button>
                                </template>
</el-popconfirm> -->
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>
        </el-main>
    </el-container>

    <save-drawer v-if="dialog.save" ref="saveDrawer" @success="onSaveSuccess"
        @closed="dialog.save = false"></save-drawer>
    <send-dialog v-if="dialog.send" ref="sendDialog" draggable @success="onSaveSuccess"
        @closed="dialog.send = false"></send-dialog>

    <el-drawer v-model="dialog.issue" :title="issueLogTitle" size="60%" destroy-on-close>
        <issue-log ref="issueLog" @closed="dialog.issue = false" :coupon="currnetCoupon"></issue-log>
    </el-drawer>
</template>

<script>
import saveDrawer from './save'
import sendDialog from './send'
import issueLog from './issue/index'

export default {
    name: 'role',
    components: {
        saveDrawer,
        sendDialog,
        issueLog
    },
    data () {
        return {
            dialog: {
                save: false,
                send: false,
                issue: false
            },
            issueLogTitle: "",
            currnetCoupon: null,
            list: {
                apiObj: this.$API.app.coupon.list,
            },
            search: {
                keyword: null
            }
        }
    },
    methods: {
        //添加
        add () {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDrawer.open()
            })
        },
        //发放优惠劵
        send (row) {
            this.dialog.send = true
            this.$nextTick(() => {
                this.$refs.sendDialog.open().setData(row);
            })
        },
        //编辑
        sendLog (row) {
            this.currnetCoupon = row;
            this.issueLogTitle = row.title + '-发放记录'
            this.dialog.issue = true
        },

        //搜索
        upsearch () {
            this.$refs.table.upData(this.search);
        },

        onSaveSuccess () {
            this.refresh();
        },
        //本地更新数据
        refresh () {
            this.$refs.table.refresh()
        }
    }
}
</script>

<style></style>
